<template>
    <div class="shopGurantee">
        <IHeader class="header" back="true" title="店铺管理" ></IHeader>
        <scroller>
            <div class="shopGurantee-wrap">
                 <div class="header1">
                     <div class="header-left">
                         <image  class="shopImg" :src=" basicForm.photo? basicForm.photo: storeInfo.headPicture" @click="singleImageUpload()"></image>
                         <input type="text" v-model="storeInfo.name" class="storeName"></input>
                         <text class="xiugai">可点击名称进行修改</text>
                     </div>
                 </div>
                <div class="item-wrap">
                <div class="item">
                    <div class="list list1">
                        <text class="list-text prise">商品评价</text>
                        <div class="listImg">
                            <image v-for="i in 5" :key="i" :src="imgPath('xingxing.png')" class="pingjia"></image>
                        </div>
                    </div>
                    <div class="list list1">
                        <text class="list-text prise">服务评价</text>
                        <div class="listImg">
                            <image v-for="i in 5" :key="i" :src="imgPath('xingxing.png')" class="pingjia"></image>
                        </div>
                    </div>
                    <div class="list list1">
                        <text class="list-text prise">响应速度</text>
                        <div class="listImg">
                            <image v-for="i in 5" :key="i" :src="imgPath('xingxing.png')" class="pingjia"></image>
                        </div>
                    </div>
                </div>
                </div>
                <div class="xian"></div>
                <div class="item item1">
                    <div class="list">
                        <text class="list-text">证照信息</text>
                        <image :src="imgPath('zhengjian.png')" class="zhengjian" @click="previewImage"></image>
                        <text class="renzheng">已认证</text>
                    </div>
                    <div class="list">
                        <text class="list-text">认证时间</text>
                        <text class="time">{{storeInfo.authenticationDate}}</text>
                    </div>
                    <div class="list">
                        <text class="list-text">店铺二维码</text>
                        <image :src="imgPath('erweima.png')" class="zhengjian" @click="yulanImage"></image>
                    </div>
                    <div class="list listInput">
                        <text class="list-text">店铺简介</text>
                        <input type="text" class="shopIntro" v-model="storeInfo.synopsis" placeholder="请输入（简介不超过18个字符）" maxlength="18"/>
                    </div>
                    <div class="list listInput">
                        <text class="list-text">联系人</text>
                        <input type="text" class="shopIntro" v-model="storeInfo.contact" placeholder="请输入"/>
                    </div>
                    <div class="list listInput">
                        <text class="list-text">联系方式</text>
                        <input type="text" class="shopIntro" v-model="storeInfo.telephone" placeholder="请输入"/>
                    </div>
                </div>
                <div class="xian"></div>
                <div class="detail">
                    <text class="title1">商家详情介绍</text>
                    <textarea type="text" class="detailText" placeholder="请输入详细介绍（内容不超过500个字）" maxlength="500" v-model="storeInfo.info"></textarea>
                </div>
                <div class="btn" @click="updateInfo">
                    <text class="confirm">确定</text>
                </div>
            </div>
        </scroller>
        <Preview :show="previewShow" :src="storeInfo.licenceInfoUrl" @hidePreview="hidePreview"></Preview>
        <Preview :show="yulanShow" :src="storeInfo.paymentCodeUrl" @hidePreview="hideYulan"></Preview>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import {updateStoreInfo, shopInfo} from '@/api/store'
import Preview from '@/components/preview'
import { fileUpload } from '@/api/common'
import { WxcLoading } from 'weex-ui'
import Nat from 'natjs'
const modal = weex.requireModule('modal')
export default {
  name: 'shopGurantee',
  data () {
    return {
      storename: '泳衣库',
      previewShow: false, // 预览弹窗隐藏
      yulanShow: false,
      paymentCodeUrl: '',
      synopsis: '',
      contact: '',
      telephone: '',
      info: '',
      basicForm: {
        photo: '' // 照片
      },
      storeInfo: {},
      needMask: true, // 显示蒙版
      loadingShow: true // loading
    }
  },
  methods: {
    previewImage (e) { // 图片预览
      const view = e.target
      let url = ''
      if (weex.config.env.platform === 'Web') {
        url = view.getAttribute('src')
      } else {
        url = view.attr.src
      }
      this.imageSrc = url
      this.previewShow = true
    },
    hidePreview () { // 隐藏预览
      this.previewShow = false
    },
    yulanImage (e) {
      const view = e.target
      let url = ''
      if (weex.config.env.platform === 'Web') {
        url = view.getAttribute('src')
      } else {
        url = view.attr.src
      }
      this.imageSrc = url
      this.yulanShow = true
    },
    hideYulan () { // 隐藏预览
      this.yulanShow = false
    },
    // 图片上传
    singleImageUpload () { // 单张图片上传
      const that = this
      Nat.image.pick({
        showCamera: true
      }, (err, ret) => {
        if (err) {
          modal.toast({
            message: '[ERROR] ' + JSON.stringify(err)
          })
          return
        }
        // that.loadingShow = true
        let path = ret.paths[0]
        Nat.upload(that.$api.url + fileUpload, {
          path: path
        }, (errs, res) => {
          if (errs) {
            modal.toast({
              message: '[ERROR] ' + JSON.stringify(errs)
            })
            return
          }
          if (res.ok) {
            let data = JSON.parse(res.data)
            let imageUrl = data.data
            that.basicForm.photo = imageUrl
          }
        })
      })
    },
    updateInfo () {
      const that = this
      let params = {
        name: that.storeInfo.name,
        synopsis: that.storeInfo.synopsis,
        contact: that.storeInfo.contact,
        telephone: that.storeInfo.telephone,
        info: that.storeInfo.info,
        headPicture: that.basicForm.photo,
        id: that.storeInfo.id
      }
      that.$api.post(updateStoreInfo, params, function (res) {
        if (res.code === '0') {
          that.$router.go(-1)
        }
      }, function () {}, true)
    }
  },
  mounted: function () {
    const that = this
    that.$api.get(shopInfo, {}, function (res) {
      that.storeInfo = res.data
      that.loadingShow = false
    }, function () {
      that.loadingShow = false
    }, true)
  },
  components: {
    IHeader,
    Preview,
    WxcLoading
  }
}
</script>
<style>
    .shopGurantee{
        background-color: rgb(235,235,235);
    }
</style>
<style scoped>
.shopGurantee-wrap{
    flex-direction: column;
    margin-top: 88px;
}
.header1{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 25px;
    padding-right: 25px;
    background-color:#fff

}
.zhengjian{
    width:40px;
    height:40px;
}
    .header-left{
        flex-direction: row;
        align-items: center;
    }
    .shopImg{
        width: 88px;
        height: 88px;
        border-radius: 44px;
        border-radius: 44px;
    }
    .storeName{
       color:rgb(70,70,70);
        font-weight:bold;
        font-size:28px;
        margin-left:24px;
        width: 400px;
        height: 50px;
        line-height: 50px;
    }
    .bianji{
        width:42px;
        height:42px;
    }
    .update{
        color:rgb(254,203,1);
        font-size:28px;
        margin-left:15px;

    }
.item{
    background-color: #fff;
    border-radius: 20px;
    padding-top: 15px;
    padding-bottom: 24px;
    flex-direction: column;
    justify-content: space-between;
    border-width:1px;
    border-style:solid;
    border-color:#ebebeb;
    padding-left: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: 24px;
}
.list{
    flex-direction: row;
    margin-top: 24px;
    padding-bottom:28px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(235,235,235);
}
.listImg{
    flex-direction: row;
}
.pingjia{
    width: 26px;
    height:26px;
    margin-right: 7px;
}
.list-text{
    width:145px;
    font-size:28px;
    color:rgb(70,70,70);
    font-weight:bold;
    margin-right: 10px;
}
.prise{
    font-size:24px;
    color:rgb(134,134,134);
    font-family: regular;
}
.list-text1{
    font-size: 26px;
    color: rgb(70,70,70);
    font-family: meduim;
}
.zhengjian{
    width:40px;
    height:40px;
}
.title1{
    font-size:28px;
    font-weight:bold;
    margin-top:24px;
}
.content{
    font-size:28px;
    color:rgb(70,70,70);
    font-family:regular;
    margin-top:15px;
}
.itemCon{
    margin-top: 88px;
}
.item1{
    border: none;
    padding-left:25px;
    padding-right:25px;
    padding-top:0;
    border-radius: 0;
}
    .item-wrap{
        padding-left: 25px;
        padding-right: 25px;
        background-color: #fff;
        padding-bottom: 24px;
    }
    .xian{
        width: 750px;
        height: 16px;
        background-color: rgb(235,235,235);
    }
    .renzheng{
        margin-left:20px;
        color:rgb(61,104,15);
        font-size:28px;
    }
    .listInput{
        flex-direction: row;
        justify-content: space-between;
    }
    .shopIntro{
        flex: 1;
        height:38px;
        line-height:38px;
        font-size:28px;
        text-align: left;
    }
    .detail{
        padding-left: 25px;
        padding-right: 25px;
        padding-top:20px;
        padding-bottom: 13px;
        background-color: #fff
    }
    .detailText{
      width:700px;
        height:300px;
        background-color:rgb(235,235,235);
        border-radius:20px;
        padding:24px;
        margin-top:40px;
        font-size:30px;
    }
    .btn{
        padding-top:98px;
        justify-content: center;
        flex-direction: row;
        padding-bottom:100px;
        background-color: #fff;
    }
    .confirm{
        width:414px;
        height:60px;
        line-height:60px;
        text-align:center;
        font-size: 30px;
        color: #fff;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        border-radius:10px;
    }
    .xiugai{
        color: red;
        font-size: 18px;
    }
.list1{
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-bottom-color: rgb(235,235,235);
    padding-bottom: 0;
}
</style>
